<template>
	<view class="container">
		<!-- <view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'rpx' }">{{ $t('开通会员') }}</view>
			<view class="header-right"></view>
		</view> -->

		<scroll-view scroll-y class="content">
			<view :style="{ height: contentTop + 'rpx' }"></view>

			<!-- 用户信息 -->
			<view class="user-info">
				<image :src="userInfo.avatar || '/static/images/f.png'" class="avatar" mode="aspectFill" />
				<view class="user-text">
					<text class="nickname">{{ userInfo.nickname || $t('游客') }}</text>
					<text v-if="userInfo.is_ever_level" class="expire-date">{{ $t('永久SVIP会员') }}</text>
					<text v-else-if="userInfo.is_money_level" class="expire-date">{{ $t('SVIP会员') }}
						{{ userInfo.overdue_time | dateFormat }}{{ $t('到期') }}</text>
					<text v-else
						class="expire-date">{{ $t('您与') }}{{ userInfo.shop_name || '' }}{{ $t('的第') }}{{ userInfo.register_days || 0 }}{{ $t('天.') }}</text>
				</view>
			</view>

			<!-- 会员类型选择 -->
			<view class="vip-title">{{ userInfo.is_money_level ? $t('续费会员') : $t('开通会员') }}</view>

			<view class="member-card" v-if="!userInfo.is_ever_level">
				<scroll-view class="card-scroll" scroll-x="true" shows-horizontalScrollIndicator="false">
					<view v-for="item in memberType" :key="item.type" class="card-item"
						:class="{ active: item.mc_id === mc_id }" @click="checkType(item)">
						<view class="card-header">
							<image src="/static/base/designer/pay_vip.png"
								style="width: 29.5rpx; height: 29.5rpx;border-radius: 14.75rpx;"></image>
							<!-- <text class="vip-tag">{{ item.title }}</text> -->
							<text class="vip-tag">VIP会员</text>
						</view>
						<view class="card-body">
							<text class="price-text">{{ $t('支付年费会员') }}<text
									class="price">{{ item.pre_price | moneyFormat }}</text>元</text>
							<!-- <text v-if="item.type === 'free'" class="benefit-text">{{ $t('试用') }}{{ item.vip_day }}{{ $t('天') }}</text> -->
							<!-- <text v-else class="benefit-text">{{ $t('原价') }}{{ $t('￥') }}{{ item.price | moneyFormat }}</text> -->
							<text style="font-size: 27rpx;font-weight: 300;">直升白银创作者</text>
						</view>

					</view>
				</scroll-view>
			</view>

			<!-- 权益说明 -->
			<view class="benefits-section" v-if="memberRights.length">
				<view class="section-title">{{ $t('SVIP会员尊享权') }}</view>
				<view v-for="item in memberRights" :key="item.id" class="benefit-item">
					<image :src="item.pic" class="benefit-icon" />
					<view class="benefit-content">
						<text class="benefit-name">{{ item.title }}</text>
						<text class="benefit-desc">{{ item.explain }}</text>
					</view>
				</view>
			</view>

			<!-- 支付按钮 -->
			<view class="pay-btn-wrapper">
				<view class="pay-btn" @click="pay">
					<text class="pay-btn-text">{{ type === 'free' ? $t('立即试用') : $t('立即支付') }}</text>
				</view>
			</view>

			<!-- 协议 -->
			<!-- <view class="agree" v-if="memberExplain">
				{{ $t('购买即视为同意') }}《<text @click="goToMark" class="mark">{{ $t('会员用户协议') }}</text>》
			</view> -->

			<!-- 卡密兑换 -->
			<!-- <view class="cash" @click="drawMemberCard">
				<text>{{ $t('点击兑换卡密') }}</text>
			</view> -->

			<!-- 优惠券 -->
			<view class="coupon-section" v-if="memberCoupons.length">
				<view class="section-hd">
					<view class="title">{{ $t('会员优惠券') }}</view>
					<navigator class="link" url="/pages/annex/vip_coupon/index">{{ $t('查看更多') }}<text
							class="iconfont icon-xiangyou"></text></navigator>
				</view>
				<scroll-view class="section-bd" scroll-x="true" shows-horizontalScrollIndicator="false">
					<view v-for="item in memberCoupons" :key="item.id" class="coupon-item"
						:class="{ gray: item.is_fail || item.status === $t('已使用') }">
						<view class="money">{{ $t('￥') }}<text class="num">{{ item.coupon_price | moneyFormat }}</text>
						</view>
						<view class="coupon-desc">
							<view class="name">{{ item.coupon_title }}</view>
							<view v-if="item.use_min_price === '0.00'" class="mark">{{ $t('无门槛券') }}</view>
							<view v-else class="mark">{{ $t('满') }}{{ item.use_min_price | moneyFormat }}{{ $t('元可用') }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 商品推荐 -->
			<view class="goods-section" v-if="goodsList.length">
				<view class="section-hd">{{ $t('SVIP商品推荐') }}</view>
				<scroll-view class="section-bd" scroll-x="true" shows-horizontalScrollIndicator="false">
					<view v-for="item in goodsList" :key="item.id" class="goods-item" @click="goDetail(item.id)">
						<image :src="item.image" class="goods-image" />
						<view class="goods-name">{{ item.store_name }}</view>
						<view class="svip-price">{{ $t('￥') }}{{ item.vip_price }}
							<image src="/static/images/vip.png" class="vip-icon" />
						</view>
						<view class="shop-price">{{ $t('商城价') }}：{{ $t('￥') }}{{ item.price }}</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>

		<!-- 卡密弹窗 -->
		<view :class="{ mask: popupShow }" @touchmove.prevent></view>
		<view class="popup" :class="{ on: popupShow }">
			<view class="cont">
				<view class="title">
					<view class="line"></view>
					<view class="name">{{ $t('激活会员卡') }}</view>
					<view class="line"></view>
				</view>
				<form class="form" @submit="checkForm">
					<input v-model="account" class="input" name="account" type="text" :placeholder="$t('请输入卡号')"
						placeholder-style="color:#C49D89" />
					<input v-model="password" class="input" name="password" type="text" :placeholder="$t('请输入卡密')"
						placeholder-style="color:#C49D89" password />
					<button class="button" form-type="submit">{{ $t('确认激活') }}</button>
				</form>
			</view>
			<button class="iconfont icon-guanbi2" @click="closePopup"></button>
		</view>

		<!-- 支付组件 -->
		<payment v-if="payMode.length > 0" :payMode="payMode" :pay_close="pay_close" :is-call="true"
			@onChangeFun="onChangeFun" :order_id="pay_order_id" :totalPrice="totalPrice"></payment>

		<!-- 底部导航 -->
		<!-- #ifndef MP -->
		<!-- <home></home> -->
		<!-- #endif -->

		<view v-show="false" v-html="formContent"></view>
	</view>
</template>

<script>
	import home from '@/components/home';
	import payment from '@/components/payment';
	import {
		mapGetters
	} from 'vuex';
	import {
		memberCard,
		memberCardDraw,
		memberCardCreate,
		groomList,
		memberOverdueTime
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import {
		basicConfig
	} from '@/api/public.js';

	export default {
		components: {
			home,
			payment
		},
		filters: {
			dateFormat: function(value) {
				return dayjs(value * 1000).format('YYYY-MM-DD');
			},
			moneyFormat: function(value) {
				return parseFloat(value);
			}
		},
		data() {
			return {
				safeTop: 0,
				contentTop: 0,
				isGetFree: null,
				popupShow: false,
				account: '',
				password: '',
				goodsList: [],
				pay_order_id: '', // 不再使用
				payMode: [],
				pay_close: false,
				totalPrice: '0',
				formContent: '',
				page: 1,
				limit: 15,
				finished: false,
				memberEndTime: '',
				// #ifdef H5
				isWeixin: this.$wechat?.isWeixin?.() || false,
				// #endif
				type: '',
				svip: null,
				mc_id: 0,
				userInfo: {},
				memberRights: [],
				memberType: [],
				memberCoupons: [],
				memberExplain: [],
				initIn: false,
				unloaded: false, // 标记页面是否已卸载,卸载后不再自动刷新支付结果
			};
		},
		watch: {
			popupShow: {
				immediate: true,
				handler() {
					this.account = '';
					this.password = '';
				}
			},
			isLogin: {
				deep: true,
				handler(newV, oldV) {
					if (newV) {
						this.memberCard();
						this.groomList();
						this.getOrderPayType();
					}
				}
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			this.initPayMode();
			if (this.isLogin) {
				this.memberCard();
				this.groomList();
				this.getOrderPayType();
			} else {
				toLogin();
			}

			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.contentTop = barTop + 30;
		},
		onUnload() {
			this.unloaded = true;
		},
		onShow() {
			this.payClose();
			let options = wx.getEnterOptionsSync?.();
			if (options?.scene == '1038' && options?.referrerInfo?.appId == 'wxef277996acc166c3' && this.initIn) {
				this.initIn = false;
				this.memberCard();
			}
		},
		onReachBottom() {
			this.groomList();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			goToMark() {
				uni.navigateTo({
					url: `/pages/annex/vip_clause/index`
				});
			},
			pay() {
				if (this.type === 'free' || parseFloat(this.totalPrice) <= 0) {
					this.createFreeMember();
					return;
				}
				// 打开支付方式选择弹窗
				this.pay_close = true;
			},
			initPayMode() {
				this.payMode = [{
						name: this.$t('微信支付'),
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: this.$t('微信支付'),
						payStatus: true
					},
					{
						name: this.$t('支付宝支付'),
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: this.$t('支付宝支付'),
						payStatus: true
					},
					{
						name: this.$t('余额支付'),
						icon: 'icon-qiandai',
						value: 'yue',
						title: this.$t('余额支付'),
						payStatus: true,
						number: 0
					}
				];
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			},
			memberCard() {
				if (this.unloaded) return; //  防止卸载后请求
				uni.showLoading({
					title: this.$t('正在加载中')
				});
				memberCard()
					.then((res) => {
						if (this.unloaded) return;//  防止卸载后请求
						uni.hideLoading();
						const {
							is_get_free,
							member_coupons,
							member_explain,
							member_rights,
							member_type
						} = res.data;
						this.isGetFree = is_get_free;
						this.userInfo = is_get_free.user_info;
						this.memberRights = member_rights;
						this.memberType = member_type;
						this.memberCoupons = member_coupons;
						this.memberExplain = member_explain;
						if (is_get_free.is_record) {
							this.memberType = this.memberType.filter((item) => item.type !== 'free');
						}
						this.totalPrice = this.memberType[0]?.pre_price || '0';
						this.type = this.memberType[0]?.type || '';
						this.svip = this.memberType[0] || null;
						this.mc_id = this.memberType[0]?.mc_id || 0;
						this.payMode[2].number = is_get_free.user_info.now_money;
						memberOverdueTime({
							member_type: this.svip?.type,
							vip_day: this.svip?.vip_day
						}).then((res) => {
							this.memberEndTime = res.data.data;
						});
					})
					.catch((err) => {
						if (this.unloaded) return;//  防止卸载后请求
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			},
			groomList() {
				if (this.finished) return;
				uni.showLoading({
					title: this.$t('正在加载中')
				});
				groomList(5, {
						page: this.page,
						limit: this.limit
					})
					.then((res) => {
						uni.hideLoading();
						this.goodsList = this.goodsList.concat(res.data.list);
						this.finished = res.data.list.length < this.limit;
						this.page += 1;
					})
					.catch((err) => {
						uni.hideLoading();
					});
			},
			checkType(svip) {
				this.type = svip.type;
				this.svip = svip;
				this.totalPrice = svip.pre_price;
				this.mc_id = svip.mc_id;
				memberOverdueTime({
					member_type: svip.type,
					vip_day: svip.vip_day,
					mc_id: svip.mc_id
				}).then((res) => {
					this.memberEndTime = res.data.data;
				});
			},
			closePopup() {
				this.popupShow = false;
			},
			getOrderPayType() {
				basicConfig().then((res) => {
					const {
						ali_pay_status,
						pay_weixin_open,
						yue_pay_status
					} = res.data;

					// 转成布尔值
					this.payMode[0].payStatus = !!pay_weixin_open;
					this.payMode[2].payStatus = !!yue_pay_status;

					// #ifdef APP-PLUS || H5
					this.payMode[1].payStatus = !!ali_pay_status;
					// #endif
					// #ifdef MP
					this.payMode[1].payStatus = false;
					// #endif

					// 如果全部关闭，至少开启一个（比如微信）
					const hasEnabled = this.payMode.some(item => item.payStatus);
					if (!hasEnabled) {
						this.payMode[0].payStatus = true; // 强制开启微信支付
					}
				}).catch((err) => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
					// 如果请求失败，也至少开启一个
					this.payMode[0].payStatus = true;
				});
			},
			drawMemberCard() {
				if (!this.popupShow) {
					this.popupShow = true;
					return;
				}
				if (!this.account) {
					return uni.showToast({
						title: this.$t('请输入卡号'),
						icon: 'none'
					});
				}
				if (!this.password) {
					return uni.showToast({
						title: this.$t('请输入卡密'),
						icon: 'none'
					});
				}
				let data = {
					member_card_code: this.account,
					member_card_pwd: this.password,
					from: 'H5'
				};
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					data.from = 'weixin';
				}
				// #endif
				// #ifdef MP
				data.from = 'routine';
				// #endif
				uni.showLoading({
					title: this.$t('激活中')
				});
				memberCardDraw(data)
					.then((res) => {
						uni.showToast({
							title: res.msg,
							success: () => {
								this.memberCard();
								this.groomList();
								this.getOrderPayType();
								this.popupShow = false;
							}
						});
					})
					.catch((err) => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			},
			createFreeMember() {
				// 免费试用逻辑（根据你的业务补充）
				uni.showToast({
					title: this.$t('试用已开启')
				});
				this.memberCard();
			},
			// 用户选择支付方式后，直接创建并支付
			onChangeFun(e) {
				let {
					action,
					value
				} = e;
				this.pay_close = false;

				if (action === 'payCheck') {
					if (!value) {
						// 支付方式无效，提示用户
						return uni.showToast({
							title: '请选择有效的支付方式',
							icon: 'none'
						});
					}
					this.createMemberCard(value);
				}
			},
			createMemberCard(paytype) {
				console.log('【开始会员支付】', paytype); // 👈 加这行
				uni.showLoading({
					title: this.$t('正在处理支付')
				});

				let query = {
					pay_type: paytype,
					type: '1',
					member_type: this.svip?.type,
					mc_id: this.mc_id,
					price: this.svip?.price,
					money: this.svip?.pre_price
				};

				// #ifdef H5
				query.from = this.isWeixin ? 'weixin' : 'weixinh5';
				query.quitUrl = location.port ?
					`${location.protocol}//${location.hostname}:${location.port}/pages/annex/vip_paid/index` :
					`${location.protocol}//${location.hostname}/pages/annex/vip_paid/index`;
				// #endif
				// #ifdef MP
				query.from = 'routine';
				// #endif
				// #ifdef APP-PLUS
				query.from = 'weixin';
				query.quitUrl = '/pages/annex/vip_paid/index';
				// #endif

				memberCardCreate(query)
					.then((res) => {
						uni.hideLoading();
						const {
							data
						} = res;
						if (!data || typeof data !== 'object') {
							return uni.showToast({
								title: '支付数据异常',
								icon: 'none'
							});
						}
						// 直接进入支付流程
						this.callPay(res);
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: err?.message || '支付失败',
							icon: 'none'
						});
					});
			},
			callPay(data) {
				
				if (this.unloaded) return; // 防止页面卸载后操作
				
				let that = this;
				let {
					status,
					result,
					msg
				} = data.data || {};

				if (!status || !result) {
					return uni.showToast({
						title: '支付参数缺失',
						icon: 'none'
					});
				}

				let goPage =
					`/pages/annex/vip_paid/index?msg=${encodeURIComponent(msg || '')}&totalPrice=${this.totalPrice}`;

				switch (status) {
					case 'PAY_DEFICIENCY':
						uni.showToast({
							title: that.$t(msg),
							icon: 'none'
						});
						break; // ✅

					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
						that.$util.Tips({
							title: msg
						}, {
							tab: 5,
							url: goPage
						});
						break; // ✅

					case 'SUCCESS':
						that.$util.Tips({
							title: msg,
							icon: 'success'
						}, {
							tab: 5,
							url: goPage
						});
						break; // ✅

					case 'WECHAT_PAY':
						// #ifdef MP
						const config = result.jsConfig;
						let mp_pay_name = uni.requestOrderPayment ? 'requestOrderPayment' : 'requestPayment';
						uni[mp_pay_name]({
							appId: config.appId,
							timeStamp: config.timeStamp || config.timestamp,
							nonceStr: config.nonceStr || config.noncestr,
							package: config.package,
							signType: config.signType || config.sign_type,
							paySign: config.paySign || config.paysign,
							success: (res) => {
								that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 5,
									url: `/pages/annex/vip_paid/index?msg=支付成功&totalPrice=${this.totalPrice}`
								});
							},
							fail: (err) => {
								if (this.unloaded) return; // 防止卸载后请求
								console.error('微信支付失败', err);
								that.$util.Tips({
									title: '取消支付'
								}, {
									tab: 5,
									url: `/pages/annex/vip_paid/index?msg=取消支付&status=2&totalPrice=${this.totalPrice}`
								});
							}
						});
						// #endif

						// #ifdef H5
						this.$wechat.pay({
							appId: config.appId,
							timeStamp: config.timeStamp || config.timestamp,
							nonceStr: config.nonceStr || config.noncestr,
							package: config.package,
							signType: config.signType || config.sign_type,
							paySign: config.paySign || config.paysign
						}).then(() => {
							that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, {
								tab: 5,
								url: goPage
							});
						}).catch(err => {
							if (this.unloaded) return; // 防止卸载后请求
							if (err.errMsg === 'chooseWXPay:cancel') {
								that.$util.Tips({
									title: '取消支付'
								}, {
									tab: 5,
									url: goPage + '&status=2'
								});
							}
						});
						// #endif

						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								appId: config.appId,
								timeStamp: config.timeStamp || config.timestamp,
								nonceStr: config.nonceStr || config.noncestr,
								package: config.package,
								signType: config.signType || config.sign_type,
								paySign: config.paySign || config.paysign
							},
							success: () => {
								uni.showToast({
									title: '支付成功'
								});
								setTimeout(() => uni.redirectTo({
									url: goPage
								}), 2000);
							},
							fail: () => {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
						// #endif

						break; // 必须加 break！

					case 'ALIPAY_PAY':
						// #ifdef H5
						this.formContent = result.jsConfig;
						this.$nextTick(() => {
							document.getElementById('alipaysubmit')?.submit();
						});
						// #endif
						// #ifdef MP
						uni.navigateTo({
							url: `/pages/users/alipay_invoke/index?id=${result.order_id}&link=${result.jsConfig.qrCode}&from=member`
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: result.jsConfig,
							success: () => {
								uni.showToast({
									title: '支付成功'
								});
								setTimeout(() => uni.redirectTo({
									url: goPage
								}), 2000);
							},
							fail: () => {
								uni.showModal({
									content: '支付失败',
									showCancel: false
								});
							}
						});
						// #endif
						break; //

					case 'ALLINPAY_PAY':
						// ... 你的逻辑
						break; //

					case 'WECHAT_H5_PAY':
						if (result.jsConfig?.h5_url) {
							location.href = result.jsConfig.h5_url;
						} else {
							uni.showToast({
								title: '支付链接无效',
								icon: 'none'
							});
						}
						break; //

					default:
						that.$util.Tips({
							title: msg || '未知错误'
						}, {
							tab: 5,
							url: goPage
						});
				}
			},
			formpost(url, postData) {
				let tempform = document.createElement("form");
				tempform.action = url;
				tempform.method = "post";
				tempform.target = "_self";
				tempform.style.display = "none";
				for (let x in postData) {
					let opt = document.createElement("input");
					opt.name = x;
					opt.value = postData[x];
					tempform.appendChild(opt);
				}
				document.body.appendChild(tempform);
				this.$nextTick(() => {
					tempform.submit();
					document.body.removeChild(tempform);
				});
			},
			payClose() {
				this.pay_close = false;
			},
			checkForm(e) {
				// 卡密提交逻辑（保持不变）
				let formData = e.detail.value;
				if (!formData.account) {
					return uni.showToast({
						title: this.$t('请输入卡号'),
						icon: 'none'
					});
				}
				if (!formData.password) {
					return uni.showToast({
						title: this.$t('请输入卡密'),
						icon: 'none'
					});
				}
				this.account = formData.account;
				this.password = formData.password;
				this.drawMemberCard();
			}
		}
	};
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
		padding-bottom: 138.8rpx;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27.76rpx;
		border-bottom: 1.735rpx solid #eeeeee;
		z-index: 100;
	}

	.header-left {
		width: 76.34rpx;
		height: 76.34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 41.64rpx;
		height: 41.64rpx;
	}

	.header-title {
		font-size: 31.23rpx;
		font-weight: 600;
		color: #333333;
	}

	.header-right {
		width: 76.34rpx;
	}

	.content {
		height: calc(100vh - 138.8rpx);
		padding-top: 0;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin: 40rpx 27.76rpx 0;
		gap: 20.82rpx;
	}

	.avatar {
		width: 86.75rpx;
		height: 86.75rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
	}

	.user-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.nickname {
		font-size: 27.76rpx;
		font-weight: 600;
		color: #333333;
	}

	.expire-date {
		font-size: 20.82rpx;
		color: #999999;
		margin-top: 6.94rpx;
	}

	.vip-title {
		font-size: 34.7rpx;
		margin: 65.93rpx 27.76rpx 0;
	}

	.member-card {
		margin: 17.35rpx 27.76rpx 52.05rpx;
		background: linear-gradient(135deg, #333333 0%, #555555 100%);
		border-radius: 27.76rpx;
		padding: 20rpx 30rpx 46.85rpx;
		color: white;
		box-shadow: 0 6.94rpx 20.82rpx rgba(0, 0, 0, 0.1);
	}

	.card-scroll {
		white-space: nowrap;
	}

	.card-item {
		padding: 20rpx;
	}

	.card-item.active {
		/* border-color: #ffcc00; */
	}

	.card-header {
		margin-bottom: 70rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.vip-tag {
		font-size: 24rpx;
		color: white;
	}

	.card-body {
		display: flex;
		justify-content: space-between;
		align-items: end;
	}

	.price-text {
		font-size: 28rpx;
		color: white;
	}

	.price {
		font-size: 50rpx;
		font-weight: bold;
		color: #fff;
	}

	.benefit-text {
		font-size: 22rpx;
		color: #cccccc;
	}

	.benefits-section {
		margin: 40rpx 27.76rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.benefit-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.benefit-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.benefit-content {
		flex: 1;
	}

	.benefit-name {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	.benefit-desc {
		font-size: 22rpx;
		color: #666;
		margin-top: 6rpx;
	}

	.pay-btn-wrapper {
		padding: 0 27.76rpx 69.4rpx;
		display: flex;
		justify-content: center;
	}

	.pay-btn {
		width: 277.6rpx;
		padding: 10.41rpx 0;
		background-color: #f19061;
		border-radius: 41.64rpx;
		text-align: center;
	}

	.pay-btn-text {
		font-size: 27.76rpx;
		color: white;
		font-weight: 600;
	}

	.agree {
		text-align: center;
		font-size: 22rpx;
		color: #797979;
		margin-bottom: 30rpx;
	}

	.link {
		color: inherit;
	}

	.mark {
		color: #ae5a2a;
	}

	.cash {
		text-align: center;
		font-size: 28rpx;
		color: #754e19;
		margin-bottom: 40rpx;
	}

	.coupon-section,
	.goods-section {
		margin: 40rpx 27.76rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.section-hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.link {
		font-size: 24rpx;
		color: #89735b;
	}

	.section-bd {
		white-space: nowrap;
	}

	.coupon-item,
	.goods-item {
		display: inline-block;
		width: 320rpx;
		margin-right: 20rpx;
		vertical-align: top;
	}

	.coupon-item {
		height: 148rpx;
		background: url('...') center/100% 100% no-repeat;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.money {
		font-size: 30rpx;
		color: #ae5a2a;
	}

	.num {
		font-size: 36rpx;
		font-weight: bold;
		color: #ae5a2a;
	}

	.coupon-desc .name {
		font-size: 26rpx;
		color: #333;
	}

	.coupon-desc .mark {
		font-size: 22rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.goods-image {
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.svip-price {
		font-size: 26rpx;
		color: #ae5a2a;
		margin-top: 10rpx;
	}

	.vip-icon {
		width: 60rpx;
		height: 24rpx;
		margin-left: 6rpx;
		vertical-align: middle;
	}

	.shop-price {
		font-size: 20rpx;
		color: #999;
		margin-top: 6rpx;
	}

	/* 弹窗 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.popup {
		position: fixed;
		bottom: -1000rpx;
		left: 50%;
		width: 600rpx;
		transform: translateX(-50%);
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		z-index: 1000;
		transition: bottom 0.3s;
	}

	.popup.on {
		bottom: 140rpx;
	}

	.popup .cont {
		text-align: center;
	}

	.popup .title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup .line {
		flex: 1;
		height: 2rpx;
		background-color: #e6c3a5;
	}

	.popup .name {
		margin: 0 25rpx;
		font-size: 40rpx;
		color: #89735b;
	}

	.popup .input {
		width: 100%;
		height: 98rpx;
		border-radius: 12rpx;
		margin-bottom: 35rpx;
		background: rgba(255, 187, 129, 0.15);
		font-size: 30rpx;
		padding: 0 50rpx;
		box-sizing: border-box;
	}

	.popup .button {
		width: 100%;
		height: 72rpx;
		border-radius: 36rpx;
		background: #353841;
		color: #ffffff;
		font-size: 32rpx;
	}

	.popup .iconfont {
		position: absolute;
		bottom: -110rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 48rpx;
		color: #ffffff;
		background: none;
	}
</style>